<script setup>
import { ref, onMounted } from 'vue'
import Back from '@/assets/img/back.png'
import Complete from '@/assets/img/complete.png'
import { useRouter, useRoute } from 'vue-router'
import axios from 'axios'
const router = useRouter();
const route = useRoute();
const title = ref('')
const id = route.query.id;
const userId = route.query.userId;
const list = ref([])
const weeks = ['日', '一', '二', '三', '四', '五', '六']
console.log('页面重新加载了')
onMounted(() => {
  title.value = localStorage.getItem('title');
  if (!title.value) {
    title.value = '';
  }
  let temp = localStorage.getItem('list')
  if (temp) {
    list.value = JSON.parse(temp);
  } else {
    list.value = []
  }
})
const gsh = (year, month, day) => {
  const date = new Date(year, month - 1, day);
  const weekDay = weeks[date.getDay()];
  return `${year}年${month}月${day}日 周${weekDay}`;
}
const getSX = (time) => {
  const str = time.substring(11, 16);
  const hour = parseInt(str.substring(0, 2));
  if (hour < 12) {
    return '上午'
  } else {
    return '下午'
  }
}
const getSx1 = (time) => {
  return time.substring(11, 16);
}
const search = () => {
  let formData = new FormData();
  formData.append('userId', userId);
  formData.append('title', title.value);
  let obj = {}
  if (typeof AOS == 'object') {
    let userInfo = JSON.parse(AOS.getUserInfo())
    obj = {
      headers: {
        'Authorization': 'Bearer' + ' ' + userInfo.token
      }
    }
  }
  axios.post('/TrueIDS/remind/getReMindForSearch', formData, obj)
    .then(response => {
      list.value = response.data.obj;
      localStorage.setItem('title', title.value);
      localStorage.setItem('list', JSON.stringify(list.value));
    })
    .catch(error => {
      console.error(error);
    });
}
const jumpDetail = (id) => {
  console.log(id)
  router.push({
    path: '/ckrc',
    query: {
      id: id,
      userId: userId
    }
  })
}
</script>

<template>
  <div class="header">
    <div class="left"><img :src="Back" @click="router.go(-1)"></div>
    <input class="middle" v-model="title" />
    <div class="right"><img :src="Complete" alt="" @click="search"></div>
  </div>
  <div class="list">
    <div class="item" v-for="item in list" :key="item.id" @click="jumpDetail(item.id)">
      <div class="itemFirst">
        <div class="itemFirstLeft">{{ gsh(item.year, item.month, item.day) }}</div>
        <!-- <div class="itemFirstRight">
          <img :src="Clock" />
          <span>10分钟前</span>
        </div> -->
      </div>

      <div class="itemSecond">
        <div class="itemSecond1" :class="item.is_complete == 1 ? '' : 'yellow'">{{ item.is_complete == 1 ? '已办' : '待办'
        }}
        </div>
        <div class="itemSecond2">上午</div>
        <div class="itemSecond2">{{ getSX(item.startTime) }}</div>
        <div class="itemSecond3">{{ getSx1(item.startTime) }}</div>
        <!-- <div class="itemSecond4"></div> -->
        <div class="itemSecond5"></div>
        <div class="itemSecond6"></div>
      </div>

      <div class="itemThree">事项：{{ item.remark }}</div>
    </div>

  </div>
</template>
<style scoped>
.header {
  background-color: #166AE7;
  color: #fff;
  height: 60px;
  width: 100%;
  display: flex;
  align-items: center;
  position: relative;
  justify-content: space-between;
  flex-shrink: 0;

  .left {
    display: flex;
    height: 100%;
    align-items: center;
    padding: 0 20px;
    flex-shrink: 0;

    div {
      background: transparent;
      font-size: 22px;
    }

    img {
      width: 24px;
      height: 18px;
    }
  }

  .middle {
    height: 40px;
    background: white;
    width: fit-content;
    font-size: 14px;
    flex-grow: 1;
    border-radius: 20px;
    border: none;
    outline: none;
    padding: 0 14px;
    color: #000000;
  }

  .right {
    display: flex;
    align-items: center;
    padding: 0 14px;
    height: 100%;
    gap: 16px;
    flex-shrink: 0;

    img {
      width: 20px;
      height: 20px;
    }
  }
}

.list {
  margin-top: 10px;
  background: white;
  overflow: auto;
  flex-grow: 1;

  .item {
    width: 100%;
    padding: 10px 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-bottom: 1px solid #E3E3E3;

    .itemFirst {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .itemFirstLeft {
        color: #000000;
        font-size: 18px;
        font-weight: 500;
      }

      .itemFirstRight {
        height: 20px;
        background: #589FF6;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        padding: 0 10px;

        img {
          width: 12px;
          height: 12px;
        }

        span {
          color: #FFFFFF;
          font-size: 12px;
        }
      }
    }

    .itemSecond {
      display: flex;
      align-items: center;

      .itemSecond1 {
        background: #909DB6;
        border-radius: 10px;
        color: white;
        height: 20px;
        line-height: 20px;
        font-size: 12px;
        padding: 0 10px;
        margin-right: 6px;

        &.yellow {
          background: #FFB800;
        }
      }

      .itemSecond2,
      .itemSecond5 {
        color: #000000;
        font-size: 14px;
        font-weight: 500;
        margin-right: 10px;
      }

      .itemSecond3,
      .itemSecond6 {
        color: #589FF6;
        font-size: 14px;
        font-weight: 500;
        margin-right: 12px;
      }

      .itemSecond4 {
        width: 1.5px;
        height: 15.5px;
        background: #E3E3E3;
        margin-right: 16px;
      }
    }

    .itemThree {
      color: #909DB6;
      font-size: 14px;
    }
  }
}
</style>
